
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="600px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ isNew ? "新建业务服务" : "编辑业务服务" }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <div class="pl30 pr30">
      <el-form :model="formData" ref="form" label-width="120px">
        <el-form-item
          label="服务编码"
          prop="key"
          :rules="[
            { required: true, message: '服务编码不能为空', trigger: 'change' },
          ]"
        >
          <el-input
            :disabled="!isNew"
            v-model.trim="formData.key"
            placeholder="请输入服务编码"
            :maxlength="64"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item
          label="服务名称"
          prop="name"
          :rules="[
            { required: true, message: '服务名称不能为空', trigger: 'change' },
          ]"
        >
          <el-input
            v-model.trim="formData.name"
            placeholder="请输入服务名称"
            :maxlength="64"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="说明">
          <el-input
            type="textarea"
            v-model.trim="formData.remark"
            placeholder="请输入说明"
            :maxlength="200"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="服务类型">
          <span>自定义服务</span>
        </el-form-item>

        <el-form-item
          label="服务方式"
          prop="type"
          :rules="[
            { required: true, message: '请选择服务方式', trigger: 'change' },
          ]"
        >
          <el-select
            style="width: 100%"
            v-model="formData.type"
            placeholder="请选择服务方式"
          >
            <el-option
              v-for="(value, key) in SERVICE_TYPE_ENUM"
              :key="key"
              :value="key"
              :label="value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="选择脚本"
          prop="scriptId"
          :rules="[
            { required: true, message: '请选择脚本', trigger: 'change' },
          ]"
        >
          <tree-select
            v-model="formData.scriptId"
            filterable
            :fieldMap="{
              value: 'id',
              label: 'name',
              disabled: 'disabled',
            }"
            :filterNodeMethod="filterNodeMethod"
            :treeData="scriptList"
          />
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { SERVICE_TYPE_ENUM } from "@/utils/enum";
import {
  createScriptTreeNode,
  filterNodeMethod,
} from "@/utils/treeSelectFormat";

import { getHmscriptfolderListTree } from "@/apis/paas/HmScriptFolderController.js";
import {
  postHmhttprequestdefinition,
  putHmhttprequestdefinition,
} from "@/apis/paas/HmHttpRequestDefinitionController.js";

export default {
  name: "ScriptModal",
  components: {},

  props: {
    modelInfo: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      filterNodeMethod,
      loading: false,
      SERVICE_TYPE_ENUM,
      showVisible: false,
      formData: {},
      scriptList: [],
      scriptLoading: false,
      serverUrl: "",
      callback: () => {},
    };
  },
  computed: {
    isNew() {
      return !this.formData.id;
    },
  },

  methods: {
    open(data = {}, callback) {
      this.showVisible = true;
      this.callback = callback;
      this.formData = {
        ...data,
      };
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
      // 获取脚本列表
      this.getHmscriptList();
    },

    close() {
      this.showVisible = false;
    },

    getHmscriptList() {
      this.scriptLoading = true;
      getHmscriptfolderListTree()
        .then((res) => {
          res.forEach((node) => {
            node.type = "folder";
          });
          this.scriptList = createScriptTreeNode(res || []);
        })
        .finally(() => {
          this.scriptLoading = false;
        });
    },

    async curFormValidate() {
      try {
        this.$refs.form.validate();
        return true;
      } catch (error) {
        console.log(error);
        return false;
      }
    },
    handleAddParam() {},
    async submit() {
      try {
        // const [formDataTrue] = await Promise.all([this.curFormValidate()]);
        // console.log(111,formDataTrue)
        // if (!formDataTrue) {
        //   return;
        // }
        await this.$refs.form.validate();

        let params = {};
        let request = null;

        const { id, key, name, remark, type, scriptId } = this.formData;
        if (this.isNew) {
          request = postHmhttprequestdefinition;
          params = {
            key,
            name,
            remark,
            type,
            scriptId,
            serviceType: "SCRIPT",
            modelId: this.modelInfo.id,
          };
        } else {
          request = putHmhttprequestdefinition;
          params = {
            id,
            name,
            remark,
            type,
            scriptId,
          };
        }
        for (const key in params) {
          params[key] =
            typeof params[key] === "string" ? params[key].trim() : params[key];
        }

        request(params)
          .then((res) => {
            this.showVisible = false;
            this.callback();
          })
          .finally(() => {});
      } catch (error) {
        console.log(error);
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item.method {
  width: 160px;
  ::v-deep .el-input__inner {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

.el-form-item.path {
  flex: 1;
  ::v-deep .el-input-group__prepend {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
  }
}

.request-tabs {
  ::v-deep .el-tabs__header {
    margin-right: 20px;
  }
}
</style>
